<template>
	<div class="error-wrapper">
		<div class="error-content">
			<div class="error-image">
				<img :src="Image404" />
			</div>
			<div class="error-title">
				<div class="error-title__level1">未找到页面！</div>
				<div class="error-title__level2">抱歉，我们无法找到您要找的页面！</div>
			</div>
			<div class="error-buttons" v-if="!extCallConfig.isCall">
				<el-button type="primary" size="default" round @click="onGoHome">返回首页</el-button>
			</div>
		</div>
	</div>
</template>

<script setup name="notFound">
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/stores/modules/store-system';
import Image404 from '@/assets/sys-404.svg'

// 定义变量内容
const router = useRouter();
const { extCallConfig } = storeToRefs(useSystemStore());

// 返回首页
const onGoHome = () => {
	router.push('/');
};
</script>

<style scoped lang="scss">
.error {
	&-wrapper {
		height: 100%;
		padding: 15px;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
	}
	&-content {
		background-color: #fff;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		border: 1px solid #e4e7ed;
		overflow: hidden;
		display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}
	&-image {
		width: 456px;
		height: 256px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	&-title {
		text-align: center;
		&__level1 {
			font-size: 20px;
			color: #303133;
			margin: 15px 0 5px 0;
			animation-delay: 0.1s;
		}
		&__level2 {
			font-size: 14px;
			color: #909399;
			margin: 15px 0 5px 0;
			animation-delay: 0.1s;
		}
	}
	&-buttons {
		margin-top: 12px;
	}
}
</style>
